<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="applyHeight">
      <div class="cornerComment-in-title">
        <span>任务详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" v-if="editForm">
        <div class="task-body">
          <div class="task-box task-info">
            <p class="task-box-title">任务详情</p>
            <div class="task-box-detail task-info-detail">
              <el-row>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">任务名称：</span>
                    <span>{{ editForm.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">发布人：</span>
                    <span>{{ editForm.admin_name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">下发时间：</span>
                    <span>{{ editForm.create_time }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">限改时间：</span>
                    <span>{{ editForm.end_time }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">任务状态：</span>
                    <span class="task-status mr-10">{{ taskStatusText }}</span>
                    <!--                    未处理的执行人进行接受，转派； 未处理 执行中 已转派 待审核 驳回 完成 -->
                    <div v-if="canCheckBtn">
                      <div v-if="taskStatusText=='未处理'">
                        <el-button type="primary" size="mini" plain @click.native="taskTakeFn">接受任务</el-button>
                        <el-button type="danger" size="mini" plain @click.native="taskChangeTakeFn('detail')">
                          转派任务（转派指定人员任务）
                        </el-button>
                      </div>
                      <div v-if="taskStatusText=='执行中'">
                        <el-button type="primary" size="mini" plain @click="openCommonDialog(3)">多次完成</el-button>
                        <el-button type="primary" size="mini" plain @click="openCommonDialog(1)">立即完成</el-button>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list" v-if="Number(tabValue)==2">
                    <span class="task-detail-title">{{ Number(tabValue) == 2 ? '审阅人' : '抄送人' }}：</span>
                    <span>
                      <el-tag size="small" v-for="(item,index) in editForm.read_users" :key="index"
                              class="mr-5">{{ item.realname }}</el-tag>
                    </span>
                  </div>
                  <div class="task-line-list" v-if="Number(tabValue)==3">
                    <span class="task-detail-title">{{ Number(tabValue) == 2 ? '审阅人' : '抄送人' }}：</span>
                    <span>
                      <el-tag size="small" v-for="(item,index) in editForm.read_users" :key="index"
                              class="mr-5" :type="item.type">{{ item.realname }}</el-tag>
                    </span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list" v-if="Number(tabValue)==2">
                    <span class="task-detail-title">档案目录：</span>
                    <span>
                      {{fileSrc}}
                    </span>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">任务描述：</span>
                    <div v-html="editForm.descript" class="contentTitle"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-file">
            <p class="task-box-title">附件文件</p>
            <div class="task-file-detail task-box-detail">
              <el-row v-if="editForm.appendix">
                <el-col :span="12" v-for="(item,index) in editForm.appendix" :key="index">
                  <div class="task-line-list">
                    <span>附件{{ index + 1 }}：</span>
                    <span class="file-link">
                      <btn_file :option="item"></btn_file>
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="24">
                  <div class="task_file_list">
                    未找到相关文件
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-user">
            <p class="task-box-title mb-10">任务执行成员-任务进度</p>
            <tips optionTemplate="taskDetailUsers"></tips>
            <div class="task-user-detail">
              <el-table
                  :data="editForm.taskuser"
                  border
                  style="width: 100%">
                <el-table-column
                    label="任务人"
                    align="center">
                  <template slot-scope="scope">
                    {{ scope.row.user ? scope.row.user.realname : '--' }}
                  </template>
                </el-table-column>
                <el-table-column
                    label="任务状态"
                    align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.is_end=='已转派'">
                      <el-tag size="mini" type="success" effect="dark">{{ scope.row.reply }}</el-tag>
                    </span>
                    <span v-else>
                    <el-tag size="mini" :type="userStatusColor[scope.row.is_end]"
                            effect="dark">{{ scope.row.is_end !== '待审核' ? scope.row.is_end : '待审阅' }}</el-tag>
                    </span>
                  </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                    prop="province"-->
                <!--                    label="完成时间">-->
                <!--                </el-table-column>-->
                <el-table-column
                    label="操作"
                    align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="scope.row.is_end!=='已转派' && scope.row.is_end!=='未处理'"
                               @click="showNoteFn(scope.row.id)">
                      查看日志
                    </el-button>
                    <el-button type="text" size="small" @click="getReview(scope.row.id)"
                               v-if="is_read && scope.row.is_end=='待审核'">查阅
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
        <!--        <el-button size="small" type="primary">确定保存</el-button>-->
      </div>
    </div>
    <singleTeacherModle :visible.sync="uservisible" @studentFn="getUser"
                        :dynamicTagsArray="dynamicTagsArray" :tabValue="tabValue"></singleTeacherModle>
    <!--detail 任务详情信息 getUser 执行函数 commonType回复类型，1去执行 2管理员评论-->
    <!--    多次完成 立即完成-->
    <taskCommonPoupe :visible.sync="teskCommon.commonvisible" :detail="editForm"
                     :commonOption="teskCommon" @getUser="getUser"
                     :commonType="teskCommon.commonType" :tabValue="tabValue"></taskCommonPoupe>
    <!--    回复-->
    <noteReply :visible.sync="noteReplyVisible" :noteId="noteId" :editForm="editForm" :tabValue="tabValue"></noteReply>

  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex';
import taskCommonPoupe from "./taskCommonPoupe";
import noteReply from "./noteReply";
import {taskEdit, taskAccept, taskReply, taskExamine} from '@/api/admin/task.js'
import {fileIndex} from '@/api/admin/file_directory.js'

export default {
  props: ['visible', 'fileOption', 'fileType', 'taskId', 'tabValue'], // tabValue 任务类型
  components: {
    taskCommonPoupe,
    noteReply
  },
  data() {
    return {
      dialogVisible: this.visible,
      noteReplyVisible: false,
      uservisible: false,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      fileId: '',
      filterText: '',
      checkFileOption: {},
      heightBox: 0,
      editForm: null,
      taskStatusText: '',
      dynamicTagsArray: {},
      teskCommon: {
        commonvisible: false,
        commonType: '',
        taskUserId: '',
      },
      noteId: 0,
      canCheckBtn: false, // 接受按键 转派按键 日志的执行人才可操作
      userStatusColor: {
        '未处理': 'warning',
        '执行中': '',
        '已转派': 'success',
        '待审核': 'warning',
        '驳回': 'danger',
        '完成': 'success'
      },
      fileSrc: '', // 档案目录
      is_read: false // 是否是审阅人
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      } else {
        this.clearPageData()
      }
    }
  },
  created() {
  },
  methods: {
    clearPageData() {
      this.editForm = null
      this.canCheckBtn = false
    },
    // 详情数据
    InitFn() {
      taskEdit({type: this.tabValue, data: {id: this.taskId}}).then(data => {
        if (!data.code) {
          //判断是什么身份
          let do_user = data.vo.users.split(',') // 执行者id
          //  针对单个人
          console.log('执行者列表，', do_user, this.userInfo.id)
          if (do_user.indexOf(this.userInfo.id.toString()) !== -1) {
            this.canCheckBtn = true // 只有执行者可以有按键权利
            // 执行者,判断任务状态
            console.log('执行者')
            for (let item of data.vo.taskuser) {
              if (item.user_id === this.userInfo.id) {
                this.taskStatusText = item.is_end === '待审核' ? '待审阅' : item.is_end
              }
            }
          } else {
            // 整体的任务状态 未处理 执行中 已转派 待审核 驳回 完成
            let status = true
            for (let item of data.vo.taskuser) {
              if (item.is_end === '未处理' || item.is_end === '执行中') {
                this.taskStatusText = '执行中'
                status = false
              }
            }
            if (status) {
              console.log('完成')
              this.taskStatusText = '完成'
            }
          }
          // read_user 审阅人 抄送人
          if (Number(this.tabValue) === 2 || Number(this.tabValue) === 3) {
            if (data.vo.read_user) {
              let read_user = data.vo.read_user.split(',') // 审阅者,抄送者 tabValue 2 审阅 3抄送
              if (read_user.indexOf(this.userInfo.id.toString()) !== -1) {
                // 审阅者,判断任务状态
                console.log('执行者')
                if (Number(this.tabValue) === 2) {
                  this.is_read = true // 这个账号是审阅人
                }
                let read = []
                if (Number(this.tabValue) === 3 && data.vo.is_read_user) {
                  read = data.vo.is_read_user.split(',')
                }
                console.log('执行者已读人员', read)
                for (let item of data.vo.read_users) {
                  console.log('抄送人：', item.id, this.userInfo.id)
                  if (item.id === this.userInfo.id) {
                    this.read_status = item.is_end
                  }
                  if (Number(this.tabValue) === 3) {
                    if (read.indexOf(item.id.toString()) !== -1) {
                      item.realname = item.realname + '(已读)'
                      item.type = 'success'
                    } else {
                      item.realname = item.realname + '(未读)'
                      item.type = 'warning'
                    }
                  }
                }
              }
            }
          }
        }
        // 旧版本的附件只有一份，没有name，为了兼容需要进行判断赋值
        if (data.vo.appendix) {
          if (data.vo.appendix.indexOf('{') !== -1) {
            let list_ = data.vo.appendix ? JSON.parse(data.vo.appendix) : []
            for(let item of list_){
              item.popover = false
            }
            data.vo.appendix = list_
          } else {
            if(data.vo.appendix === '[]'){
              data.vo.appendix = ''
            }else{
              data.vo.appendix = [{name: '附件1', src: data.vo.appendix, popover: false}]
            }
          }
        }
        this.editForm = data.vo
        if (Number(this.tabValue) === 2) {
          this.getFileSrc()
        }
      })
    },
    getFileSrc() {
      fileIndex({}).then(data => {
        let a = {}
        for (let item of data.list) {
          a[item.id] = item
        }
        this.getFileName(a, this.editForm.path_id, [])
      })
    },
    getFileName(data, id, name) {
      if(data[id]){
        name.push(data[id].name)
        if(data[id].parent_id){
          this.getFileName(data, data[id].parent_id, name)
        }else{
          let src = name.reverse();
          this.fileSrc = src.join('/')
        }
      }
    },
    // 接受任务 需要判断是普通任务 档案任务 公文任务
    taskTakeFn() {
      let _self = this
      this.$confirm('确定接受任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        taskAccept({type: this.tabValue, data: {id: this.taskId}}).then(data => {
          if (!data.code) {
            _self.$message.success('接受成功!')
            _self.InitFn()
          } else {
            _self.$message.error(data.msg)
          }
        })
      }).catch(() => {
        console.log('取消')
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    taskChangeTakeFn(option) {
      this.uservisible = true
    },
    getUser(option) {
      if (option !== 'comment') {
        this.$confirm('你确认将任务转派给：' + option.realname + '？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 请求转派接口 ,转派人员id userId
          taskReply({type: this.tabValue, data: {user_id: option.id, id: this.taskId}}).then(data => {
            if (data.code === 0) {
              this.InitFn()
              this.$emit('InitFn')
              this.$message.success('转派成功!')
              this.uservisible = false
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
        })
      } else {
        this.InitFn()
        this.$emit('InitFn')
      }
    },
    openCommonDialog(option) {
      this.teskCommon.commonType = option
      this.teskCommon.commonvisible = true
    },
    showNoteFn(id) {
      this.noteId = id
      this.noteReplyVisible = true
    },
    getReview(id) {
      this.$confirm('确认审阅内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 0 通过 1 驳回
        taskExamine({type: this.tabValue, data: {id: id, type: 0}}).then(data => {
          console.log('data:', data)
          if (data.code) {
            this.$message.error(data.msg)
          } else {
            this.$message.success(data.msg)
            this.InitFn()
          }
        })
      }).catch(() => {
      });
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
.contentTitle {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #eee;
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}

.task-box {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
}

.task-box-title {
  border-left: 3px solid #009bfb;
  padding-left: 10px;
  height: 15px;
  line-height: 15px;
}

.task-line-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-detail-title {
  display: block;
  width: 75px;
}

.task-box-detail {
  margin-top: 20px;
}

.file-link {
  color: #1b8de5;
  cursor: pointer;
}

.file-link:hover {
  text-decoration: underline;
}

.task-status {
  color: red;
}

.task_file_list {
  text-align: center;
  color: #999;
}
</style>
